<style scoped lang="less">
.iot-blk{
	height: 422px;
}
.info-list{
	padding: 8px 0;
	text-align: center;
	color: #AFECFF;
	font-size: 18px;
	.num{
		color:#FFFB0E;
		font-size: 30px;
	}
	img{
		height: 50px;
		margin-bottom: 10px;
	}
	.el-col{
		padding: 25px 0;
	}
}
</style>
<template>
	<div class="iot-blk">
		<div class="hd flex" >
			<h2 class="flex-1">设备信息概况</h2>
		</div>
		<div class="con">
			<el-row class="info-list">
				<el-col :span="12">
					<img src="../../../assets/images/icon-device.png" alt="设备总数">
					<p>设备总数</p>
					<p class="num">{{data.allCount}}</p>
				</el-col>
				<el-col :span="12">
					<img src="../../../assets/images/icon-alarm.png" alt="报警设备">
					<p>报警设备</p>
					<p class="num">{{data.alarmCount}}</p>
				</el-col>
				<el-col :span="12">
					<img src="../../../assets/images/icon-normal.png" alt="正常设备">
					<p>正常设备</p>
					<p class="num">{{data.normalCount}}</p>
				</el-col>
				<el-col :span="12">
					<img src="../../../assets/images/icon-offline.png" alt="离线设备">
					<p>离线设备</p>
					<p class="num">{{data.offLineCount}}</p>
				</el-col>
			</el-row>
		</div>
		
		<i class="corner bottom"></i>
		<i class="corner top"></i>
	</div>
</template>
<script>
export default {
	name: 'iotBlk',
	props: {
		data: {
    		type: Object,
			default () {
				return {}
			}
    	},
	},
	computed: {},
	watch: {},
	data () {
		return {
			loading: false
		}
	},
	methods: {
		
	},
	created () {
		// 
	},
}
</script>